<template>
  <div>
    <div v-for="(item, index) in detailsList" :key="index">
      <!-- 店主主页 -->
      <template v-if="item.componentType === 42">
        <div
          class="flex v-align-c user-bar height-40 font-12 pad-l-8 pad-r-8"
          :style="{
            top: statusBarHeight + 'px',
            backgroundColor: item.propMap.homeBackgroundColor,
            color: item.propMap.homeFontColor
          }">
          <div class="flex v-align-c" @click="taHome">
            <span class="pos-rel">
              <img v-if="memberInfo.avatar" class="avatar" :src="memberInfo.avatar"/>
              <img class="icon-v" v-if="fileSpace" :src="fileSpace + '/images/icon-v.png'"/>
            </span>
            <span class="font-w" v-text="item.propMap.shopName ? item.propMap.shopName : memberInfo.nickname"></span>
            <icon v-if="item.propMap.homeStyle === 11" class="iconfont icon-arrow-right icon-next"
              :style="{'color': item.propMap.homeFontColor}"></icon>
          </div>
          <div class="flex-item">&nbsp;</div>
          <div v-if="item.propMap.homeStyle === 10 || !item.propMap.homeStyle" class="flex v-align-c pad-8 mar-r--8"
            @click="taHome">
            <span class="dark-gray" :style="{'color': item.propMap.homeFontColor}">TA的主页</span>
            <icon class="iconfont icon-arrow-right icon-next" :style="{'color': item.propMap.homeFontColor}"></icon>
          </div>
          <div v-if="item.propMap.homeStyle === 11" class="flex v-align-c search-ri pad-t-3 pad-b-3 pad-l-15 pad-r-15"
            @click="$pt.navigateTo({url: '/pages/shop/searchView/main'})">
            <img class="width-15 height-15 mar-r-5" v-if="fileSpace" :src="fileSpace + '/images/icon-search-5.png'"/>
            <span class="font-14">搜索</span>
          </div>
        </div>
        <div class="height-40"></div>
      </template>
      <!-- 轮播组 -->
      <template v-if="item.componentType === 19">
        <swiper-img :autoplay="true" :enterpriseCustomerServiceAuthority="enterpriseCustomerServiceAuthority" :swiperInfo="item.swiperList" :swiperProps="item.propMap" :avatar="memberInfo.avatar" :nickname="memberInfo.nickname + '的V客主页'" @linkTo="linkTo"></swiper-img>
      </template>
      <!-- 直播 -->
      <template v-if="item.componentType === 30">
        <div class="live-main">
          <div class="pad-l-15 pad-r-15">
            <div class="title-bar live-title flex v-align-c mar-t-19 mar-b-7">
              <template v-if="item.propMap.isTitleShow === 'true'">
                <h2 class="font-19 font-w flex-item">{{item.propMap.liveTitle ? item.propMap.liveTitle : '今日直播'}}</h2>
                <div v-if="item.propMap.isMoreShow === 'true'" class="flex v-align-c" @click="$pt.navigateTo({url: '/pages/home/live-list/main'})">
                  <div class="font-14 font-color-6">查看更多</div>
                  <icon class="iconfont icon-arrow-right font-color-6"></icon>
                </div>
              </template>
            </div>
            <div :class="'live-play-' + item.propMap.liveStyle">
              <div class="flex-live" :class="'live-type-' + item.propMap.showType">
                <!-- 上下展示 -->
                <template v-if="item.propMap.liveStyle === '10'">
                  <div class="flex-live-item vertically" :class="'live-style-' + item.propMap.showStyle" v-for="(itemList, indexList) in item.liveList" :key="indexList">
                    <div class="live-bar" :class="'live-type-' + item.propMap.showType" @click="liveTo(itemList.roomId)">
                      <div class="live-bar-l">
                        <div class="live-status font-12 font-white">
                          <div v-if="itemList.live_status === 101" class="flex v-align-c live-active">
                            <img v-if="fileSpace" :src="fileSpace + '/images/icon_point.png'" alt="" class="width-6 height-6 mar-r-2">
                            <label>正在直播</label>
                          </div>
                          <div v-else-if="itemList.live_status === 102">
                            <span v-if="itemList.start_time">{{ itemList.start_time }}</span><span>开播</span>
                          </div>
                          <div v-else>
                            <span>回放</span>
                          </div>
                        </div>
                        <img v-if="itemList.cover_img" :src="item.propMap.showType === '12' ? itemList.cover_img : itemList.share_img + '?imageView2/1/w/690/h/690'" class="cover-img" mode="aspectFill" />
                        <div class="live-name hide-style-3">{{ itemList.name }}</div>
                        <div class="live-bar-3 show-style-3">
                          <div class="names">{{ itemList.name }}</div>
                          <div class="flex v-align-c infos" @click="liveTo(itemList.roomId)">
                            <div class="name-line flex v-align-c">
                              <i class="pad-r-5">主播: </i>
                              <span class="flex-item">{{ itemList.anchor_name }}</span>
                            </div>
                            <div class="flex-item"></div>
                            <button size="mini" :style="{backgroundColor: appInfo.style.color2, color: appInfo.style.styleType === 10 ? appInfo.style.color4 : '#fff'}" class="mini-btn share-btn"
                              @click.stop.prevent="$pt.navigateTo({url: '/pages/home/live-share/main?roomid=' + itemList.roomId})">分享</button>
                          </div>
                        </div>
                      </div>
                      <div class="live-bar-r">
                        <div class="live-name">{{ itemList.name }}</div>
                        <div class="goods-info flex">
                          <span>
                            <img v-if="itemList.minCover_img" :src="itemList.minCover_img" class="goods-img width-48 height-48" mode="aspectFill" />
                            <i>
                              <u>￥</u>
                              <em>{{ itemList.minPrice }}</em>
                            </i>
                          </span>
                          <div v-if="itemList.goods" class="goods-num width-48 height-48 flex flex-center">
                            <div class="font-12">
                              <p>{{ itemList.goods.length }}件</p>
                              <p>宝贝</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="flex v-align-c pad-t-10 hide-style-3" @click="liveTo(itemList.roomId)">
                      <div class="font-13 font-w"><span v-if="item.propMap.showType !== '10'">主播: </span>{{ itemList.anchor_name }}</div>
                      <div v-if="itemList.goods && item.propMap.showType === '10'" class="font-12 font-color-6"> &nbsp;&nbsp; | &nbsp; 商品：{{ itemList.goods.length }}</div>
                      <div class="flex-item"></div>
                      <button size="mini" :style="{backgroundColor: appInfo.style.color2, color: appInfo.style.styleType === 10 ? appInfo.style.color4 : '#fff'}" class="mini-btn share-btn"
                        @click.stop.prevent="$pt.navigateTo({url: '/pages/home/live-share/main?roomid=' + itemList.roomId})">分享</button>
                    </div>
                  </div>
                </template>
                <!-- 左右轮播 -->
                <template v-else>
                  <swiper class="live-swiper" :autoplay="0" :current="current" interval="5000" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#ffffff" duration="1000" :indicator-dots="false"
                    :display-multiple-items="item.propMap.showType === '12' && item.propMap.liveListLen > 1 ? '2':'1'">
                    <div class="flex-live-item" :class="'live-style-' + item.propMap.showStyle" v-for="(itemList, indexList) in item.liveList" :key="indexList">
                      <swiper-item class="swiper-item">
                        <div class="swiper-bar">
                          <div class="live-bar" :class="'live-type-' + item.propMap.showType" @click="liveTo(itemList.roomId)">
                            <div class="live-bar-l">
                              <div class="live-status font-12 font-white">
                                <div v-if="itemList.live_status === 101" class="flex v-align-c live-active">
                                  <img v-if="fileSpace" :src="fileSpace + '/images/icon_point.png'" alt="" class="width-6 height-6 mar-r-2">
                                  <label>正在直播</label>
                                </div>
                                <div v-else-if="itemList.live_status === 102">
                                  <span v-if="itemList.start_time">{{ itemList.start_time }}</span><span>开播</span>
                                </div>
                                <div v-else>
                                  <span>回放</span>
                                </div>
                              </div>
                              <img v-if="itemList.cover_img" :src="item.propMap.showType === '12' ? itemList.cover_img : itemList.share_img + '?imageView2/1/w/690/h/690'" class="cover-img" mode="aspectFill" />
                              <div class="live-name hide-style-3">{{ itemList.name }}</div>
                              <div class="live-bar-3 show-style-3">
                                <div class="names">{{ itemList.name }}</div>
                                <div class="flex v-align-c infos" @click="liveTo(itemList.roomId)">
                                  <div class="name-line flex v-align-c">
                                    <i class="pad-r-5">主播: </i>
                                    <span class="flex-item">{{ itemList.anchor_name }}</span>
                                  </div>
                                  <div class="flex-item"></div>
                                  <button size="mini" :style="{backgroundColor: appInfo.style.color2, color: appInfo.style.styleType === 10 ? appInfo.style.color4 : '#fff'}" class="mini-btn share-btn"
                                    @click.stop.prevent="$pt.navigateTo({url: '/pages/home/live-share/main?roomid=' + itemList.roomId})">分享</button>
                                </div>
                              </div>
                            </div>
                            <div class="live-bar-r">
                              <div class="live-name">{{ itemList.name }}</div>
                              <div class="goods-info flex">
                                <span>
                                  <img v-if="itemList.minCover_img" :src="itemList.minCover_img" class="goods-img width-48 height-48" mode="aspectFill" />
                                  <i>
                                    <u>￥</u>
                                    <em>{{ itemList.minPrice }}</em>
                                  </i>
                                </span>
                                <div v-if="itemList.goods" class="goods-num width-48 height-48 flex flex-center">
                                  <div class="font-12">
                                    <p>{{ itemList.goods.length }}件</p>
                                    <p>宝贝</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="flex v-align-c pad-t-10 hide-style-3" @click="liveTo(itemList.roomId)">
                            <div class="font-13 font-w"><span v-if="item.propMap.showType !== '10'">主播: </span>{{ itemList.anchor_name }}</div>
                            <div v-if="itemList.goods && item.propMap.showType === '10'" class="font-12 font-color-6"> &nbsp;&nbsp; | &nbsp; 商品：{{ itemList.goods.length }}</div>
                            <div class="flex-item"></div>
                            <button size="mini" :style="{backgroundColor: appInfo.style.color2, color: appInfo.style.styleType === 10 ? appInfo.style.color4 : '#fff'}" class="mini-btn share-btn"
                              @click.stop.prevent="$pt.navigateTo({url: '/pages/home/live-share/main?roomid=' + itemList.roomId + '?live_status=' + itemList.live_status})">分享</button>
                          </div>
                        </div>
                      </swiper-item>
                    </div>
                  </swiper>
                </template>
              </div>
            </div>
            <div class="height-5"></div>
          </div>
        </div>
      </template>
      <!-- 搜索框 -->
      <div class="search-bar width-375 box-border" v-if="item.componentType === 15" 
      :style="'background:'+item.propMap.backgroundColor" @click="$pt.navigateTo({url: '/pages/shop/searchView/main'})">
        <div class="search" :class="searchClass">
          <icon type="search" size="16" class="mar-l-8 mar-r-8"></icon>
          <div class="font-12">{{item.propMap.placeholder}}</div>
        </div>
      </div>
      <!-- 按钮组 -->
      <template v-if="item.componentType === 11" >
        <!-- item.propMap.templateStyle === 1 -->
        <div class="button-bar" :style="{'background': item.propMap.backgroundColor, 
        'padding':item.propMap.verticalMargin+'px 0', 'margin': '0 ' + item.propMap.horizontalMargin + 'px', 'border-radius': item.propMap.radius + 'px'}">
            <!-- 图片按钮、文字按钮，固定不可滚动 -->
            <div
              v-if="(item.length < item.propMap.rowNum * item.propMap.pageNum) || item.length === item.propMap.rowNum * item.propMap.pageNum"
              :class="item.propMap.templateStyle === '10' ? 'pad-t-5' : ''">
              <ul v-for="(pitem,pindex) of item.buttonGroupList" class="button-ul"
                  :key="pindex" style="display:flex; justify-content: flex-start;flex-wrap: wrap;">
                <li v-for="(sitem,sindex) of pitem" :key="sindex" class="single-page" :class="'single-txt single-page-' + item.propMap.templateStyle">
                  <div v-for="(val,vindex) of sitem" :key="vindex" :style="[{flex: (1/item.propMap.rowNum)}]" @click.stop="linkTo(val)">
                    <div style="position:relative">
                      <button v-if="val.linkType === '1012' && enterpriseCustomerServiceAuthority === 1" :send-message-title="memberInfo.nickname + '的V客主页'" 
                      plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
                      send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
                      :session-from="'7moor|'+ customerInfo.nickname + '|' + customerInfo.avatar +'|'+ customField"></button>
                      <img v-if="val.imgUrl && item.propMap.templateStyle === '10'" class="width-48 height-48" :class="'btns-radius-' + item.propMap.buttonStyle" :src="val.imgUrl" alt="">
                    </div>
                    <div class="pad-t-3 pad-b-3" :style="{'color': item.propMap.fontColor}">
                      {{ val.buttonName }}
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 滚动选择 -->
            <div v-else>
              <!-- 图片按钮滚动开始 -->
              <div v-if="item.propMap.templateStyle === '10'" class="pad-t-5">
                <swiper class="button-swiper"
                  :style="{height:item.propMap.pageNum === '1'? '140rpx' : '304rpx'}" >
                  <swiper-item v-for="(swiperitem,itemindex) of item.buttonGroupList" :key="itemindex" circular="true">
                    <ul v-for="(rowitem,rowindex) of swiperitem" :key="rowindex" class="button-ul" style="display:flex; justify-content: flex-start;flex-wrap: wrap;">
                      <li v-for="(singleitem,singleindex) of rowitem" :key="singleindex" :style="[{flex: (1/item.propMap.rowNum)}]" class="double-page" @click.stop="linkTo(singleitem)">
                        <div style="position:relative">
                          <button v-if="singleitem.linkType === '1012' && enterpriseCustomerServiceAuthority === 1" :send-message-title="memberInfo.nickname + '的V客主页'" 
                            plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
                            send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
                            :session-from="'7moor|'+ memberInfo.nickname + '|' + memberInfo.avatar +'|'+ customField"></button>
                          <img class="width-48 height-48" v-if="singleitem.imgUrl && item.propMap.templateStyle === '10'" :class="'btns-radius-' + item.propMap.buttonStyle" :src="singleitem.imgUrl" alt="">
                        </div>
                        <div class="pad-t-3 pad-b-3" :style="{'color': item.propMap.fontColor}">
                          {{ singleitem.buttonName }}
                        </div>
                      </li>
                    </ul>
                  </swiper-item>
                </swiper>
              </div>
              <!-- 图片按钮滚动结束 -->
              <!-- 文字按钮滚动开始 -->
              <swiper class="button-swiper" 
                v-else
                :style="{height:item.propMap.pageNum === '1'? '50rpx' : '146rpx'}" >
                <swiper-item v-for="(swiperitem,itemindex) of item.buttonGroupList" :key="itemindex" circular="true">
                  <ul v-for="(rowitem,rowindex) of swiperitem" :key="rowindex" class="button-ul" style="display:flex; justify-content: flex-start;flex-wrap: wrap;">
                    <li v-for="(singleitem,singleindex) of rowitem" :key="singleindex" :style="[{flex: (1/item.propMap.rowNum)}]" class="double-page" @click.stop="linkTo(singleitem)">
                      <div style="position:relative">
                        <button v-if="singleitem.linkType === '1002' && enterpriseCustomerServiceAuthority === 1" :send-message-title="memberInfo.nickname + '的V客主页'" 
                          plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
                          send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"></button>
                        <img class="width-48 height-48" v-if="singleitem.imgUrl && item.propMap.templateStyle === '10'" :class="'btns-radius-' + item.propMap.buttonStyle" :src="singleitem.imgUrl" alt="">
                      </div>
                      <div class="pad-t-3 pad-b-3" :style="{'color': item.propMap.fontColor}">
                        {{ singleitem.buttonName }}
                      </div>
                    </li>
                  </ul>
                </swiper-item>
              </swiper>
              <!-- 文字按钮滚动结束 -->
            </div>
        </div>
      </template>
      <!-- 图片组 -->
      <div class="img-bar" v-if="item.componentType === 12"
      :style="{'padding': item.propMap.verticalMargin + 'px ' + item.propMap.horizontalMargin + 'px'}">
        <div class="image pos-rel" :class="{'double-img': item.propMap.picStyle !== '10'}"
        :style="{'width':item.propMap.picStyle === '10' ? '100%' : '50%'}"
        v-for="(img, imgIndex) in item.pictureList"
          :key="imgIndex" @click="linkTo(img)">
          <button v-if="img.linkType === '1012' && enterpriseCustomerServiceAuthority === 1" :send-message-title="memberInfo.nickname + '的V客主页'" plain
          send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
            send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"
            :session-from="'7moor|'+ customerInfo.nickname + '|' + customerInfo.avatar +'|'+ customField"></button>
          <img :id="imgIndex === 0 ? 'img-bar-' + index : ''" :mode="item.propMap.picStyle === '10' ? 'widthFix' : ''" 
            :style="{height: item.propMap.height + 'px', borderRadius: item.propMap.radius + 'px'}"
            :src="img.imgUrl" v-if="img.imgUrl" alt="">
        </div>
      </div>
      <!-- 标题栏 -->
      <div v-if="item.componentType === 13" class="title-bar title-component pos-rel"
        :class="'title-align-' + item.propMap.textAlign" :style="{background: item.propMap.backgroundColor, color: item.propMap.fontColor,
         fontSize: item.propMap.textSize, padding: item.propMap.verticalMargin + 'px ' + item.propMap.horizontalMargin + 'px'}" @click="linkTo(item.propMap)">
        <button v-if="item.propMap.linkType === '1002' && enterpriseCustomerServiceAuthority === 1" :send-message-title="memberInfo.nickname + '的V客主页'" plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
          send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"></button>
        {{item.propMap.title}}
        <div v-if="item.propMap.titleStyle === '11'" class="title-more flex v-align-c font-12" :style="{color: item.propMap.showMoreColor}">
          查看更多<icon class="iconfont icon-arrow-right icon-next font-10"></icon>
        </div>
      </div>
      <!-- 商品 -->
      <div class="goods-bar" v-if="item.componentType === 20" :style="{'padding': item.propMap.verticalMargin + 'px ' + item.propMap.horizontalMargin + 'px', 'background-color': item.propMap.backgroundColor}">
        <div :class="'show-type-' + item.propMap.goodsStyle">
          <div class="detail mar-t-10 mar-b-10" :class="{'goods-type-11': item.propMap.goodsDetailStyle === '11', 'goods-type-10': item.propMap.goodsDetailStyle === '10'}" 
            v-for="(good, goodIndex) in item.list"
            :key="goodIndex" :style="{'border-radius': item.propMap.radius + 'px'}">
              <div class="img-box"
                v-if="(item.propMap.goodsStyle === '13' && (goodIndex % 2 === 0)) || item.propMap.goodsStyle !== '13'"
                @click="$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + good.goodsId + '&goodsType=' + good.goodsType})">
                <img v-if="item.propMap.goodsStyle === '10'" :src="good.picUrl ? good.picUrl : good.imgUrl" alt="">
                <img v-if="good.imgUrl && item.propMap.goodsStyle !== '10'" :src="good.imgUrl" alt="">
                <div class="sell-out" v-if="item.propMap.sellOutIconType === '11' && (good.stock === 0 || good.goodsStatus === 0)">
                  <div class="del-layer align-c">
                    <div class="font-18">已售完</div>
                    <div class="font-10 mar-t-2">SOLD OUT</div>
                  </div>
                </div>
              </div>
              <div class="content" :style="{'background-color': item.propMap.goodsBackgroundColor ? item.propMap.goodsBackgroundColor : '#fff'}">
                <div class="title-share" @click="$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + good.goodsId + '&goodsType=' + good.goodsType})">
                  <div :class="item.propMap.goodsStyle === '10' ? 'line-1' : 'line-2'" :style="{'color': item.propMap.goodsTitleColor}">{{good.title}}</div>
                  <div :class="checkOwner ? 'plate-h' : 'plate-other-h'">
                    <div v-if="good.income && good.income > 0 && getCustomerId" class="nameplate">
                      <span class="left">{{appInfo.commissionAlias || '分销赚'}}</span>
                      <span class="right"><span style="color:#ffe200;">{{good.income}}</span>元</span>
                    </div>
                  </div>
                </div>
                <div class="price-row font-color-9 flex flex-between">
                  <div class="row-left" @click="$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + good.goodsId + '&goodsType=' + good.goodsType})">
                    <div class="color-price flex v-align-t" :class="{'pad-t-12': item.propMap.goodsStyle === '13' && !good.scribingPrice}">
                      <span class="timelimit" v-if="item.propMap.goodsStyle === '13'">限时/</span>
                      <div class="flex v-align-t" :style="{'color': item.propMap.goodsPriceColor}">
                        <span class="dollar-sign">￥</span>
                        <span class="price" :class="{'price-short': item.propMap.goodsStyle !== '13'}">{{good.price}}</span>
                      </div>
                    </div>
                    <div :class="item.propMap.goodsStyle === '13' && !good.scribingPrice ? 'pad-b-5' : '' ">
                      <div class="font-over font-12" v-if="(item.propMap.goodsStyle === '10' || item.propMap.goodsStyle === '12' || item.propMap.goodsStyle === '13') && good.scribingPrice">￥{{good.scribingPrice}}</div>
                    </div>
                  </div>
                  <div v-if="item.propMap.goodsStyle !== '13'" class="row-right font-12">
                    <div v-if="!good.selShow" class="width-36 height-36 flex flex-center" @click.stop.prevent="showCart(good)">
                      <template v-if="item.propMap.showBuyButton === '1' && item.propMap.buyStyle">
                        <img class="width-22 height-23 mar-t--1" v-if="fileSpace && item.propMap.buyStyle === '10'" :src="fileSpace + '/images/buy-sty-10.png'" />
                        <img class="width-22 height-23 mar-t--1" v-if="fileSpace && item.propMap.buyStyle === '11'" :src="fileSpace + '/images/buy-sty-11.png'" />
                      </template>
                    </div>
                    <div v-else class="height-36">
                      <van-stepper v-model="good.goodsNum" class="goods-step" :class="'step-' + appInfo.style.styleType"
                        min="0" disable-input :max="good.stock" @click.stop.prevent=""
                        @minus="onMinusGoodsNum($event, good)" @plus="onPlusGoodsNum($event, good)"
                        @change="onChangeGoodsNum($event, good)" />
                    </div>
                  </div>
                </div>
                <div @click="$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + good.goodsId + '&goodsType=' + good.goodsType})">
                  <div class="rushtobuy-btn" v-if="item.propMap.goodsStyle === '13'">马上抢购</div>
                </div>
              </div>
              <div class="img-box"
              v-if="item.propMap.goodsStyle === '13' && (goodIndex % 2 !== 0)"
              @click="$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + good.goodsId + '&goodsType=' + good.goodsType})">
                <img v-if="item.propMap.goodsStyle === '10'" :src="good.picUrl ? good.picUrl : good.imgUrl" alt="">
                <img v-if="good.imgUrl && item.propMap.goodsStyle !== '10'" :src="good.imgUrl" alt="">
                <div class="sell-out" v-if="item.propMap.sellOutIconType === '11' && (good.stock === 0 || good.goodsStatus === 0)">
                  <div class="del-layer align-c">
                    <div class="font-18">已售完</div>
                    <div class="font-10 mar-t-2">SOLD OUT</div>
                  </div>
                </div>
              </div>
          </div>
          <div class="load-more pad-b-15" @click="loadMoreGoods(item)" v-if="item.propMap.selectType === '11' && item.list.length !== item.goodsPage.total">
            <span>加载更多</span>
            <van-icon :name="item.propMap.goodsStyle !== '14' ? 'arrow' : 'arrow-down'" :class="{'mar-l-3': item.propMap.goodsStyle !== '14'}" />
          </div>
        </div>
      </div>
      <!-- 辅助分割线 -->
      <div class="dividing-bar" v-if="item.componentType === 22" 
        :style="{'margin': item.propMap.verticalMargin + 'px 0'}">
        <div v-if="item.propMap.blankStyle === '11'" class="dividing mar-l-15 mar-r-15" :style="{height: item.propMap.lineHeight + 'px',backgroundColor: item.propMap.lineColor}"></div>
      </div>
      <!-- 秒杀组 -->
      <div class="seckill-bar goods-bar" v-if="item.componentType === 31"
        :style="{'padding': item.propMap.verticalMargin + 'px ' + item.propMap.horizontalMargin + 'px', 'background-color': item.propMap.backgroundStyle === '10' ? item.propMap.backgroundColor : 'transparent'}">
        <div class="title-bar flex flex-between pad-t-19 pad-b-15" v-if="item.propMap.titleShow === '1'">
          <h2 class="font-19 mar-t-10 font-w left-title" :style="{background:item.propMap.countDownTitleColor}">
            <div class="small-title" :style="{'color': item.propMap.titleColor}">{{item.propMap.promotionTitle}}</div>
          </h2>
          <div class="flex flex-between flex-item">
            <div class="flex v-align-c font-12 timer">
              <div class="mar-r-5 mar-l-14 font-12"
                v-if="item.propMap.isStart" :style="{'color': item.propMap.titleColor}">仅剩</div>
              <div class="mar-r-5 mar-l-14 font-12"
                v-else :style="{'color': item.propMap.titleColor}">距离开抢</div>
              <div class="count-down">
                <van-count-down use-slot :time="item.propMap.countTime" @change="bizChange(item, $event)" @finish="bizFinished(item)">
                  <template v-if="item.timer">
                    <template v-if="(item.timer.days !== '00') && item.timer.days">
                      <span class="square-block" :style="{background:item.propMap.countDownTitleColor, 'color': item.propMap.countDownNumberColor}">{{item.timer.days}}</span>
                      <span class="mar-l-2 mar-r-2 font-color" :style="{'color': item.propMap.titleColor}">天</span>
                    </template>
                    <span class="square-block" :style="{background:item.propMap.countDownTitleColor, 'color': item.propMap.countDownNumberColor}">{{item.timer.hours}}</span>
                    <span class="mar-l-2 mar-r-2" :style="{'color': item.propMap.titleColor}">:</span>
                    <span class="square-block" :style="{background:item.propMap.countDownTitleColor, 'color': item.propMap.countDownNumberColor}">{{item.timer.minutes}}</span>
                    <span class="mar-l-2 mar-r-2" :style="{'color': item.propMap.titleColor}">:</span>
                    <span class="square-block" :style="{background:item.propMap.countDownTitleColor, 'color': item.propMap.countDownNumberColor}">{{item.timer.seconds}}</span>
                  </template>
                </van-count-down>
              </div>
            </div>
            <div class="font-12 font-color-9 v-align-c" v-if="item.propMap.moreShow === '1'" @click="linkToDfSeckill(item)" :style="{'color': item.propMap.showMoreColor}">
              <span class="mar-r-2">查看更多</span>
              <van-icon name="arrow" :color="item.propMap.showMoreColor" size="12px" />
            </div>
          </div>
        </div>
        <div v-else class="pad-t-15"></div>
        <div :class="'show-type-' + item.propMap.promotionStyle">
          <div class="detail mar-b-15" v-for="(good, goodIndex) in item.goodsList" :key="goodIndex"
            :style="{'border-radius': item.propMap.radius + 'px'}"
            :class="{'goods-type-11': item.propMap.goodsDetailStyle === '11', 'goods-type-10': item.propMap.goodsDetailStyle === '10'}"
            @click="$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + good.goodsId + '&goodsType=' + good.goodsType})">
            <div class="img-box" v-if="(item.propMap.promotionStyle === '13' && (goodIndex % 2 === 0)) || item.propMap.promotionStyle !== '13'">
              <img v-if="item.propMap.promotionStyle === '10'" :src="good.picUrl ? good.picUrl : good.imgUrl" alt="">
              <img v-if="good.imgUrl && item.propMap.promotionStyle !== '10'" :src="good.imgUrl" alt="">
              <div class="sell-out" v-if="item.propMap.sellOutIconType === '11' && (good.stock === 0 || good.goodsStatus === 0)">
                <div class="del-layer align-c">
                  <div class="font-18">已售完</div>
                  <div class="font-10 mar-t-2">SOLD OUT</div>
                </div>
              </div>
            </div>
            <div class="content" :style="{'background-color': item.propMap.goodsBackgroundColor ? item.propMap.goodsBackgroundColor : '#fff'}">
              <div class="title-share">
                <div :class="item.propMap.promotionStyle === '10' ? 'line-1' : 'line-2'"
                  :style="{'color': item.propMap.goodsTitleColor}">{{good.title}}</div>
                <div :class="checkOwner ? 'plate-h' : 'plate-other-h'">
                  <div v-if="good.income && good.income > 0 && getCustomerId" class="nameplate">
                    <span class="left">{{appInfo.commissionAlias || '分销赚'}}</span>
                    <span class="right"><span style="color:#ffe200;">{{good.income}}</span>元</span>
                  </div>
                </div>
              </div>
              <div class="price-row font-color-9 flex flex-between">
                <div class="row-left">
                  <div class="color-price flex v-align-t" :class="{'pad-t-12': item.propMap.promotionStyle === '13' && !good.scribingPrice}">
                    <span class="timelimit" v-if="item.propMap.promotionStyle === '13'">限时/</span>
                    <div class="flex v-align-t" :style="{'color': item.propMap.goodsPriceColor}">
                      <span class="dollar-sign">￥</span>
                      <span class="price" :class="{'price-short': item.propMap.promotionStyle !== '13'}" >{{good.price}}</span>
                    </div>
                  </div>
                  <div :class="(item.propMap.promotionStyle === '13' && !good.scribingPrice) ? 'pad-b-5' : '' ">
                    <div class="font-over font-12" v-if="(item.propMap.promotionStyle === '10' || item.propMap.promotionStyle === '12' || item.propMap.promotionStyle === '13') && good.scribingPrice">
                      ￥{{good.scribingPrice}}</div>
                  </div>
                </div>
                <div v-if="item.propMap.promotionStyle !== '13'" class="row-right font-12">
                  <div class="height-36 width-36 flex flex-center" v-if="!good.selShow" @click.stop.prevent="showCart(good)">
                    <template v-if="item.propMap.showBuyButton === '1' && item.propMap.buyStyle">
                      <img class="width-22 height-23 mar-t--1" v-if="fileSpace && item.propMap.buyStyle === '10'" :src="fileSpace + '/images/buy-sty-10.png'" />
                      <img class="width-22 height-23 mar-t--1" v-if="fileSpace && item.propMap.buyStyle === '11'" :src="fileSpace + '/images/buy-sty-11.png'" />
                    </template>
                  </div>
                  <div v-else class="height-36">
                    <van-stepper v-model="good.goodsNum" class="goods-step" :class="'step-' + appInfo.style.styleType"
                    min="0" disable-input :max="good.stock" @click.stop.prevent=""
                    @minus="onMinusGoodsNum($event, good)" @plus="onPlusGoodsNum($event, good)"
                    @change="onChangeGoodsNum($event, good)" />
                  </div>
                </div>
              </div>
              <div>
                <div class="rushtobuy-btn" v-if="item.propMap.promotionStyle === '13'">马上抢购</div>
              </div>
            </div>
            <div class="img-box" v-if="item.propMap.promotionStyle === '13' && (goodIndex % 2 !== 0)">
              <img v-if="item.propMap.promotionStyle === '10'" :src="good.picUrl ? good.picUrl : good.imgUrl" alt="">
              <img v-if="good.imgUrl && item.propMap.promotionStyle !== '10'" :src="good.imgUrl" alt="">
              <div class="sell-out" v-if="item.propMap.sellOutIconType === '11' && (good.stock === 0 || good.goodsStatus === 0)">
                <div class="del-layer align-c">
                  <div class="font-18">已售完</div>
                  <div class="font-10 mar-t-2">SOLD OUT</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 文章 -->
      <div v-if="item.componentType === 14" class="bg-color-white pad-l-15 pad-r-15">
        <div class="pad-t-6 pad-b-6 pad-l-10 pad-r-10">
          <text space="nbsp" v-html="item.text.content"></text>
        </div>
      </div>
      <!-- 视频 -->
      <div class="bg-color-white text-align-c pad-l-15 pad-r-15" v-if="item.componentType === 16">
        <video :src="item.video.videoUrl" :poster="item.video.videoImg" class="video" :class="'video-w-' + item.video.videoStyle" controls="controls" />
      </div>
      <!-- 音频 -->
      <div class="bg-color-white" v-if="item.componentType === 17">
        <div class="align-c">
          <div class="audio-box pos-rel">
            <div class="audio-bar">
              <label v-show="!item.show" @click="audioPlay(item.sortNo)" class="width-42 height-42 audio-btn play"></label>
              <label v-show="item.show" @click="audioPause(item.sortNo)" class="width-42 height-42 audio-btn pause"></label>
            </div>
            <audio :id="'myAudio'+item.sortNo" class="audio-con" poster="https://projectimg.joinsun.vip/images/audio-default-2.png" :name="item.audio.title" :author="item.audio.subtitle" :src="item.audio.audioUrl"
              controls="controls" :loop="item.audio.loopPlayback === 1 ? 'loop':''" />
          </div>
        </div>
      </div>
      <!-- 悬浮按钮 -->
      <div v-if="item.componentType === 21">
        <float-btn :floatList="floatList" urlFrom="home" @userInfo="userInfo"/>
      </div>
      <!-- 内容组件 -->
      <div v-if="item.componentType === 40">
        <div class="content-center">
          <!-- 内容组件标题展示、隐藏判断 -->
          <div v-if="item.propMap.isTitleShow === 'true'" class="flex flex-between content-title">
            <div class="font-18 font-w">{{ item.propMap.contentTitle ? item.propMap.contentTitle : '今日推荐' }}</div>
            <div v-if="item.propMap.isShowMore === 'true'" class="content-more font-12" @click="$pt.navigateTo({ url: '/pages/home/content-center/main' })">
              <span class="flex v-align-c">查看更多<van-icon name="arrow" /></span>
            </div>
          </div>
          <div class="content-item pad-t-10 mar-l-15 pad-r-15 pad-b-15"
            @click="$pt.navigateTo({ url: '/pages/home/content-center/content-detail/main?contentInfoId=' + content.contentInfoId })"
            v-for="(content, contentIndex) in item.contentList"
            :key="contentIndex">
            <div class="flex-between-t">
              <div class="pos-rel">
                <img class="width-125 height-70" :src="content.coverUrl" alt="">
                <img class="width-24 height-24 play-layer" :src="fileSpace + '/images/content-play-layer.png'" alt="" v-if="content.contentType === 2 && fileSpace">
              </div>
              <div class="flex-between-col mar-l-10">
                <div class="line-2 font-w">{{content.contentName}}</div>
                <div class="flex flex-between font-color-6 font-13" style="width: 100%;">
                  <span>{{content.createTime}}</span>
                  <div class="v-align-c">
                    <img class="width-16 height-11" :src="fileSpace + '/images/content-view-icon.png'" alt="" v-if="content.contentType === 1 && fileSpace">
                    <img class="width-14 height-14" :src="fileSpace + '/images/content-play-icon.png'" alt="" v-if="content.contentType === 2 && fileSpace">
                    <div class="mar-l-3 width-26">{{content.accessCount}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 暂无数据 -->
    <div class="align-c" style="padding-top: 120px;" v-if="nodata">
      <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
      <div class="align-c mar-t-5 font-16 font-color-6">
        暂无数据
      </div>
    </div>
    <!--sku选择-->
    <get-sku-buy v-if="appInfo.style" ref="getSkuBuy" :styleColor="appInfo.style" :goodsType="goodsType" :room_id="room_id" :goodsData="goods" :skuPropList="skuPropList" :skuList="skuList" :values="values"
      @finished="getSkuBuyFinished" @close="getSkuBuyClose">
    </get-sku-buy>
  </div>
</template>
<script>
/**
 * 类型
 * 10:辅助空白
 * 11:按钮组
 * 12:图片
 * 13:标题栏
 * 14: 富文本
 * 15:搜索框
 * 16:视频
 * 17:音频
 * 18:辅助线
 * 19:轮播图
 * 20:商品组
 * 30:小程序直播
 * 31:秒杀组
 * 40:内容组件
 * 41:标签导航
 */
import { addShoppingCart, getProjectGoodsSku } from '@/api/shop'
import { saveByPromotionGoodsId, getMemberInfo, pageDetailGoods } from '@/api/home'
import SwiperImg from '@/components/SwiperImg/SwiperImg'
import { getAppInfo, getAuthority } from '@/api/common'
import GetSkuBuy from '@/components/GetSkuBuy'
import { setFastGoods, setCategoryInfo } from '@/utils/auth'
import FloatBtn from '@/components/FloatBtn'

export default {
  name: 'secondPage',
  components: { GetSkuBuy, FloatBtn, SwiperImg },
  props: {
    resData: {
      type: Object,
      default: {}
    },
    content: {
      type: Array,
      default: function() {
        return []
      }
    },
    enterpriceId: {
      // 团长所属企业id
      type: String,
      default: ''
    },
    urlFrom: {
      // 组件来源
      type: String,
      default: ''
    }
  },
  data() {
    return {
      statusBarHeight: 0,
      detailsList: [],
      isComponents: true,
      audioCtx: [],
      audioCtxObj: {},
      type: 3,
      innerAudioContext: null,
      hasAudio: 0,
      palying: false,
      bizEndTime: 60 * 10 * 1000,
      bizTimer: {},
      serverDate: '',
      linkList: {
        1001: '/pages/personal/coupon/coupon-center/main', // 领券中心
        1002: '/pages/contact-btn/main', // 微信客服
        1004: '/pages/shop/main', // 分类链接
        1005: '/pages/home/main', // 首页
        1006: '/pages/shop/main', // 分类
        1007: '/pages/shop/cart/main', // 购物车
        1008: '/pages/personal/main', // 个人中心
        1009: '/pages/home/content-center/main', // 内容中心
        1011: '/pages/personal/message/detail/main', // 小B客服
        1012: '/pages/contact-btn/main', // 企业客服
        1101: '/pages/home/second-custom/main', // 自定义页面
        1401: '/pages/home/live-list/main', // 直播列表
        1501: '/pages/home/default-seckill/main', // 限时秒杀
        2001: '/pages/shop/detail/main', // 商品详情
        4001: '/pages/home/content-center/content-detail/main' // 内容中心详情
      },
      cartBadge: 1,
      goodsType: '',
      room_id: null,
      goods: {},
      skuPropList: [],
      skuList: [],
      values: [],
      fastGoods: [],
      floatList: [],
      memberInfo: {},
      customerInfo: {},
      goodsLoad: 0,
      rowNum: '', // 按钮组每行个数
      pageNum: '', // 按钮组行数
      length: '',
      listArr: [],
      buttonList: [],
      appInfo: {},
      buttonGroupCount: 0,
      nodata: false,
      timer: null,
      shopCustomerServiceAuthority: 1, // 小B客服增值功能 0关闭 1开启
      enterpriseCustomerServiceAuthority: 1 // 企业客服增值功能 0关闭 1开启
    }
  },
  computed: {
    searchClass() {
      let styleAry = []
      this.detailsList.forEach(item => {
        if (item.componentType === 15) {
          styleAry = ['search-align-' + item.propMap.textAlign, 'search-shape-' + item.propMap.searchStyle]
        }
      })
      return styleAry
    }
  },
  watch: {
    content: {
      deep: true,
      immediate: false,
      handler(newVal) {
        this.nodata = false
        this.appInfo = this.$pt.getStorageSync('appInfo')
        this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
        this.data()
      }
    }
  },
  onLoad() {
    this.getAuthority()
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.appInfo = this.$pt.getStorageSync('appInfo')
    // this.data()
  },
  mounted() {
    // setTimeout(() => {
    //   this.data()
    // }, 100)
    this.appInfo = this.$pt.getStorageSync('appInfo')
  },
  methods: {
    taHome() {
      if (!this.getMemberId) return
      this.$pt.navigateTo({url: '/pages/home/member-info/main?friendId=' + this.getMemberId + '&urlFrom=inSide'})
    },
    // 运营总后台 增值功能权限获取
    getAuthority() {
      getAuthority().then(res => {
        this.shopCustomerServiceAuthority = res.data.shopCustomerServiceAuthority
        this.enterpriseCustomerServiceAuthority = res.data.enterpriseCustomerServiceAuthority
      }).catch(err => {
        console.log(err)
      })
    },
    btnTotalChange(item) {
      this.listArr = []
      let arr2 = []
      let arr3 = []
      let count = 1
      // if (item.templateType !== 1) return item.buttonGroupList
      for (let i = 0; i < item.buttonGroupList.length; i++) {
        arr3.push(item.buttonGroupList[i])
        if (arr3.length === parseInt(item.propMap.rowNum) || (i + 1 === item.buttonGroupList.length)) {
          arr2.push(arr3)
          arr3 = []
        }
        if ((i + 1 === parseInt(item.propMap.rowNum) * parseInt(item.propMap.pageNum * count)) || (i + 1 === item.buttonGroupList.length)) {
          this.listArr.push(arr2)
          count++
          arr2 = []
        }
      }
      return this.listArr
    },
    liveTo(roomid) {
      if (this.getCustomerId) {
        if (this.getPhone) {
          let customParams = {
            liveShareMemberId: this.getMemberId,
            liveShareCustomerId: this.getCustomerId
          }
          console.log('secondPage this.custom_params')
          console.log(customParams)
          this.$pt.navigateTo({
            url: 'plugin-private://' + process.env.LIVE_ID + '/pages/live-player-plugin?room_id=' + roomid +
          '&custom_params=' + encodeURIComponent(JSON.stringify(customParams))
          })
        } else {
          this.$emit('userInfo', true)
        }
      } else {
        this.$emit('userInfo', true)
      }
    },
    getAppInfo() {
      return new Promise((resolve, reject) => {
        getAppInfo().then(response => {
          if (response.isError) {
            reject(response.isError)
          } else {
            this.serverDate = response.date
            resolve(response.date)
          }
        }).catch(() => { })
      })
    },
    userInfo() {
      this.$emit('userInfo', true)
    },
    linkTo(item) {
      if (item.linkType) {
        const linkType = Number(item.linkType)
        if (linkType === 1012 && this.enterpriseCustomerServiceAuthority === 0) {
          this.$utils.showToast({title: '链接已失效'})
          return
        }
        if (linkType === 1002) {
          this.$utils.showToast({title: '链接已失效'})
          return
        }
        if (linkType === 1004) {
          this.$pt.removeStorageSync('categoryInfo')
          setCategoryInfo(this.$utils.getCaption(item.linkParams))
          this.$pt.switchTab({ url: this.linkList[item.linkType] })
          return
        }
        if (linkType === 1005 || linkType === 1006 || linkType === 1007 || linkType === 1008) {
          this.$pt.switchTab({ url: this.linkList[item.linkType] })
          return
        }
        if (linkType === 1011) {
          if (this.shopCustomerServiceAuthority === 0) {
            this.$utils.showToast({title: '链接已失效'})
            return
          }
          let cId = this.$pt.getStorageSync('customerId')
          let mId = this.$pt.getStorageSync('memberId')
          if (cId === mId) {
            this.$utils.showToast({
              title: '不能与自己聊天'
            })
          } else {
            this.$pt.navigateTo({url: this.linkList[item.linkType] + '?memberId=' + this.getMemberId})
          }
          return
        }
        if (item.linkParams) {
          this.$pt.navigateTo({ url: this.linkList[item.linkType] + item.linkParams })
        } else {
          if (linkType === 1501) {
            this.$pt.navigateTo({ url: this.linkList[item.linkType] + '?enterpriseId=' + this.enterpriceId })
          } else {
            this.$pt.navigateTo({ url: this.linkList[item.linkType] })
          }
        }
      }
    },
    audioPlay(num) {
      for (var i = 0; i < this.detailsList.length; i++) {
        if (this.detailsList[i].sortNo === num) {
          this.detailsList[i].show = true
          const changeData = this.detailsList[i].show
          this.$delete(this.detailsList[i], 'show')
          this.$set(this.detailsList[i], 'show', changeData)
        } else {
          this.detailsList[i].show = false
          const changeData = this.detailsList[i].show
          this.$delete(this.detailsList[i], 'show')
          this.$set(this.detailsList[i], 'show', changeData)
        }
        if (this.detailsList[i].type === 'audio') {
          this.audioCtxObj[i].pause()
        }
        this.audioCtxObj[num].play()
      }
    },
    audioPause(num) {
      this.audioCtxObj[num].pause()
      for (var i = 0; i < this.detailsList.length; i++) {
        if (this.detailsList[i].sortNo === num) {
          this.detailsList[i].show = false
        }
      }
    },
    audioStart(num) {
      this.audioCtxObj[num].seek(0)
    },
    onMinusGoodsNum(e, itemOne) {
      if (itemOne.skuFlag === 1) {
        itemOne.goodsNum = itemOne.goodsNum + 1
        const changeData = itemOne.goodsNum
        this.$delete(itemOne, 'goodsNum')
        this.$set(itemOne, 'goodsNum', changeData)
        this.$utils.showToast({ title: '该商品是多属性商品，请到购物车操作' })
      } else {
        if (itemOne.goodsNum > itemOne.stock) return this.$utils.showToast({ title: '不能大于商品库存' })
        this.goodsLoad = 0
        this.detailsList.forEach(itemList => {
          if (!itemList.goodsList) return
          if (!itemList.goodsList.length) return
          itemList.goodsList.forEach(item => {
            if (itemOne.goodsId === item.goodsId) {
              item.goodsNum = itemOne.goodsNum
              item.selShow = true
              if (!item.goodsNum) {
                item.selShow = false
              }
              this.goodsLoad++
              if (this.goodsLoad === 1) {
                this.addShoppingCart(-1, itemOne)
              }
            }
          })
        })
      }
    },
    onPlusGoodsNum(e, itemOne) {
      if (itemOne.skuFlag === 1) {
        itemOne.goodsNum = itemOne.goodsNum - 1
        this.skuPropList = []
        this.skuList = []
        this.values = []
        this.goods = itemOne
        this.goodsType = itemOne.goodsType
        this.goods.price = ''
        this.goods.price = itemOne.sellPrice
        this.goods.images = []
        this.goods.images[0] = itemOne.mainImage
        this.goods.isCart = true
        this.getProjectGoodsSku(itemOne)
      } else {
        if (itemOne.goodsNum > itemOne.stock) return this.$utils.showToast({ title: '不能大于商品库存' })
        this.simpleSkuEls(itemOne)
      }
    },
    simpleSkuEls(itemOne) {
      this.goodsLoad = 0
      this.detailsList.forEach(itemList => {
        if (!itemList.goodsList) return
        if (!itemList.goodsList.length) return
        itemList.goodsList.forEach(item => {
          if (itemOne.goodsId === item.goodsId) {
            item.goodsNum = itemOne.goodsNum
            item.selShow = true
            this.goodsLoad++
            if (this.goodsLoad === 1) {
              this.addShoppingCart(1, itemOne)
            }
          }
        })
      })
    },
    onChangeGoodsNum(e, item) {
      item.goodsNum = e.mp.detail
    },
    getSkuBuyClose() {
      this.$pt.showTabBar({
        animation: false
      })
    },
    getSkuBuy(isCart, item) {
      if (this.getCustomerId) {
        if (this.shareMemberId) {
          item.shareMemberId = this.shareMemberId
        }
        const comissionFlag = this.getCurrentPage().query.comissionFlag
        this.$refs.getSkuBuy.show(item, isCart, comissionFlag, item.qty)
      } else {
        this.$pt.reLaunch({ url: '/pages/home/main' })
      }
    },
    getSkuBuyFinished(params) {
      this.goodsLoad = 0
      this.detailsList.forEach(itemList => {
        if (!itemList.goodsList) return
        if (!itemList.goodsList.length) return
        itemList.goodsList.forEach(item => {
          if (params.goodsId === item.goodsId) {
            let addCount = 0
            if (item.goodsNum) {
              addCount = item.goodsNum + params.goodsNum
            } else {
              addCount = params.goodsNum
            }
            item.goodsNum = addCount
            item.selShow = true
            this.goodsLoad++
            if (this.goodsLoad === 1) {
              this.cartBadgeEls(1, item, params)
            }
          }
        })
      })
    },
    getProjectGoodsSku(item) {
      this.goods = this.$utils.deepClone(item)
      this.$utils.showToast({
        title: '加载中',
        icon: 'loading'
      })
      getProjectGoodsSku({
        goodsId: item.goodsId,
        microShopFlag: item.goodsType === 30 || item.goodsType === 31 || item.goodsType === 32 ? 0 : 1
      }).then((response) => {
        if (response.isError) return
        this.$pt.hideToast()
        this.goods.skuPropList = response.data.skuPropList
        this.goods.skuList = response.data.skuList
        this.goods.values = response.data.values
        this.skuPropList = response.data.skuPropList
        this.skuList = response.data.skuList
        this.values = response.data.values
        this.$pt.hideTabBar({
          animation: false
        })
        setTimeout(() => {
          this.getSkuBuy(true, this.goods)
        }, 100)
      }).catch(() => {
      })
    },
    showCart(good) {
      if (this.getCustomerId) {
        if (this.getPhone) {
          if (good.skuFlag === 1) {
            this.skuPropList = []
            this.skuList = []
            this.values = []
            this.goods = good
            this.goodsType = good.goodsType
            this.goods.sellPrice = ''
            this.goods.sellPrice = good.price
            this.goods.images = []
            this.goods.images[0] = good.imgUrl
            this.goods.isCart = true
            this.getProjectGoodsSku(good)
          } else {
            good.goodsNum = 1
            this.simpleSkuEls(good)
          }
        } else {
          this.$emit('userInfo', true)
        }
      } else {
        this.$emit('userInfo', true)
      }
    },
    // 判断数组是否存在某个key值
    checkArrInclude(arr, item, keyName) {
      let arrData = []
      if (arr.length !== 0) {
        arr.forEach(item => {
          arrData.push(item[keyName])
        })
      }
      if (arrData.includes(item)) {
        return true
      } else {
        return false
      }
    },
    cartBadgeEls(value, item, params) {
      if (this.$pt.getStorageSync('fastGoods')) {
        this.fastGoods = this.$pt.getStorageSync('fastGoods')
        if (!this.fastGoods.length && this.urlFrom) {
          this.$pt.removeTabBarBadge({
            index: 2
          })
        }
      } else {
        this.fastGoods = []
        if (this.urlFrom) {
          this.$pt.removeTabBarBadge({
            index: 2
          })
        }
      }
      // 多规格类型
      if (params !== undefined) {
        // 多规格加、减数量缓存处理
        // console.log(params)
        if (this.fastGoods.length !== 0) {
          // 判段商品是否已经存在
          if (this.checkArrInclude(this.fastGoods, params.goodsId, 'goodsId')) {
            // 已存在goodsId商品
            this.fastGoods.forEach(itemGoods => {
              if (itemGoods.goodsId === params.goodsId) {
                // 已存在skuId商品
                if (this.checkArrInclude(itemGoods.skuList, params.skuId, 'skuId')) {
                  itemGoods.goodsNum = null
                  itemGoods.sellPrice = null
                  itemGoods.skuList.forEach(itemSku => {
                    if (itemSku.skuId === params.skuId) {
                      itemSku.goodsNum = itemSku.goodsNum + params.goodsNum
                      itemSku.sellPrice = (Math.round((itemSku.goodsNum * params.sellPrice) * 100) / 100).toFixed(2)
                    }
                    itemGoods.goodsNum += itemSku.goodsNum
                    itemGoods.sellPrice += Math.round(itemSku.sellPrice * 100) / 100
                  })
                  itemGoods.sellPrice = (Math.round(itemGoods.sellPrice * 100) / 100).toFixed(2)
                } else {
                  itemGoods.skuList.push({
                    skuId: params.skuId,
                    goodsNum: params.goodsNum,
                    sellPrice: (Math.round((params.goodsNum * params.sellPrice) * 100) / 100).toFixed(2)
                  })
                  itemGoods.goodsNum = null
                  itemGoods.sellPrice = null
                  itemGoods.skuList.forEach(itemSku => {
                    itemGoods.goodsNum += itemSku.goodsNum
                    itemGoods.sellPrice += Math.round(itemSku.sellPrice * 100) / 100
                  })
                  itemGoods.sellPrice = (Math.round(itemGoods.sellPrice * 100) / 100).toFixed(2)
                }
              }
            })
          } else {
            // 新增商品
            let skuData = []
            skuData.push({
              skuId: params.skuId,
              goodsNum: params.goodsNum,
              sellPrice: (Math.round((params.goodsNum * params.sellPrice) * 100) / 100).toFixed(2)
            })
            let goodsNum = null
            let sellPrice = null
            skuData.forEach(item => {
              goodsNum += item.goodsNum
              sellPrice += Math.round(item.sellPrice * 100) / 100
            })
            this.fastGoods.push({
              goodsId: params.goodsId,
              skuFlag: 1,
              skuList: skuData,
              goodsNum: goodsNum,
              sellPrice: (Math.round(sellPrice * 100) / 100).toFixed(2)
            })
          }
        } else {
          let skuData = []
          skuData.push({
            skuId: params.skuId,
            goodsNum: params.goodsNum,
            sellPrice: (Math.round((params.goodsNum * params.sellPrice) * 100) / 100).toFixed(2)
          })
          let goodsNum = null
          let sellPrice = null
          skuData.forEach(item => {
            goodsNum += item.goodsNum
            sellPrice += Math.round(item.sellPrice * 100) / 100
          })
          this.fastGoods.push({
            goodsId: params.goodsId,
            skuFlag: 1,
            skuList: skuData,
            goodsNum: goodsNum,
            sellPrice: (Math.round(sellPrice * 100) / 100).toFixed(2)
          })
        }
        setFastGoods(this.fastGoods)
        this.totalCartBadge(item)
        return
      }
      // 单规格类型
      if (value === 1) {
        // 单规格加数量缓存处理
        if (this.fastGoods.length !== 0) {
          // 判段商品是否已经存在
          if (this.checkArrInclude(this.fastGoods, item.goodsId, 'goodsId')) {
            // 已存在商品
            this.fastGoods.forEach(itemGoods => {
              if (itemGoods.goodsId === item.goodsId) {
                itemGoods.goodsNum = item.goodsNum
                itemGoods.sellPrice = (Math.round((item.goodsNum * item.sellPrice) * 100) / 100).toFixed(2)
              }
            })
          } else {
            // 新增商品
            this.fastGoods.push({
              goodsId: item.goodsId,
              skuFlag: 0,
              goodsNum: item.goodsNum,
              sellPrice: (Math.round((item.goodsNum * item.sellPrice) * 100) / 100).toFixed(2)
            })
          }
        } else {
          this.fastGoods.push({
            goodsId: item.goodsId,
            skuFlag: 0,
            goodsNum: item.goodsNum,
            sellPrice: (Math.round((item.goodsNum * item.sellPrice) * 100) / 100).toFixed(2)
          })
        }
        setFastGoods(this.fastGoods)
      } else {
        // 单规格减数量缓存处理
        this.fastGoods.forEach((itemGoods, indexGoods) => {
          if (itemGoods.goodsId === item.goodsId) {
            // 已存在商品
            itemGoods.goodsNum--
            itemGoods.sellPrice = (Math.round((itemGoods.goodsNum * item.sellPrice) * 100) / 100).toFixed(2)
            if (!itemGoods.goodsNum) {
              this.fastGoods.splice(indexGoods, 1)
            }
          }
        })
        setFastGoods(this.fastGoods)
      }
      this.totalCartBadge(item)
      // 清除购物车角标数
      if (!this.fastGoods.length && this.urlFrom) {
        this.$pt.removeStorageSync('fastGoods')
        this.$pt.removeTabBarBadge({
          index: 2
        })
      }
    },
    addShoppingCart(value, good) {
      if (!this.getShowBuyCard) return
      this.cartBadgeEls(value, good)
      const shoppingCart = {
        customerId: this.getCustomerId,
        goodsId: good.goodsId,
        goodsNum: value,
        memberId: this.getMemberId,
        goodsType: good.goodsType,
        shoppingCartType: good.goodsType === 30 || good.goodsType === 31 || good.goodsType === 32 ? 3 : 1
      }
      addShoppingCart(shoppingCart).then((response) => {
        if (response.isError) return
        if (value === 1) this.$utils.showToast({ title: '加入购物车成功' })
      }).catch(() => {
      })
    },
    linkToDfSeckill(item) {
      let promotionId = item.propMap.promotionId || ''
      this.$pt.navigateTo({ url: `/pages/home/default-seckill/main?enterpriseId=${this.enterpriceId}&promotionId=${item.propMap.selectType === '10' ? '' : promotionId}` })
    },
    bizList() {
      if (!this.getCustomerId && this.getShowBuyCard) return false
    },
    bizFinished(item) {
      // 倒计时结束触发函数
      let endTime = this.$utils.formatTimeStamp(item.propMap.endTime)
      let startTime = this.$utils.formatTimeStamp(item.propMap.startTime)
      if (!item.propMap.isStart) {
        // 此时倒计时为活动即将开始倒计时，进入此判断，即将进入距离结束倒计时，所以用结束时间减去开始时间
        item.propMap.countTime = endTime - startTime
        item.propMap.isStart = true
        item.propMap.isSeckill = true
      } else {
        // 此时为距离活动结束倒计时 触发倒计时结束事件 删除该秒杀组件
        item.isOver = true
        let list = this.$utils.deepClone(this.detailsList)
        let index = list.findIndex(value => {
          return value.isOver === true
        })
        list.splice(index, 1)
        this.detailsList = list
      }
      this.bizList()
    },
    bizChange(item, e) {
      // 秒杀倒计时
      let timer = e.mp.detail
      if (timer.days < 10) {
        timer.days = '0' + timer.days
      }
      if (timer.hours < 10) {
        timer.hours = '0' + timer.hours
      }
      if (timer.minutes < 10) {
        timer.minutes = '0' + timer.minutes
      }
      if (timer.seconds < 10) {
        timer.seconds = '0' + timer.seconds
      }
      item.timer = timer
      this.bizTimer = timer
    },
    async data() {
      if (!this.getMemberId) return
      this.nodata = false
      this.detailsList = []
      this.getMemberInfo()
      if (this.$pt.getStorageSync('fastGoods')) {
        this.fastGoods = this.$pt.getStorageSync('fastGoods')
        if (!this.fastGoods.length && this.urlFrom) {
          this.$pt.removeTabBarBadge({
            index: 2
          })
        }
      } else {
        this.fastGoods = []
        if (this.urlFrom) {
          this.$pt.removeTabBarBadge({
            index: 2
          })
        }
      }
      this.cartBadge = 1
      // 此处为了获取服务器当前时间 需用同步请求，防止时间错乱
      this.serverDate = await this.getAppInfo()
      // 将父组件传入的数据进行深拷贝
      let cloneData = this.$utils.deepClone(this.content)
      for (let i = 0; i < cloneData.length; i++) {
        if (cloneData[i].componentType === 11) {
          cloneData[i].length = cloneData[i].buttonGroupList.length
          cloneData[i].buttonGroupList = this.btnTotalChange(cloneData[i])
        }
        if (cloneData[i].componentType === 17) {
          let num = cloneData[i].sortNo
          this.audioCtx.push(num)
          cloneData[i].show = false
        }
        // if (this.detailsList[i].componentType === 12) {
        //   // 图片组处理
        //   let height = 0
        //   let width = 0
        //   const query = this.$pt.createSelectorQuery()
        //   this.$pt.getImageInfo({
        //     src: this.detailsList[i].pictureList[0].imgUrl,
        //     success: images => {
        //       height = images.height
        //       width = images.width
        //       query.selectAll('#img-bar-' + i).boundingClientRect().exec(res => {
        //         const resData = res[0][0]
        //         const imgHeight = parseInt(height * resData.width / width)
        //         this.$set(this.detailsList[i].propMap, 'height', imgHeight)
        //       })
        //     }
        //   })
        // }
        if (cloneData[i].componentType === 14) {
          if (cloneData[i].text.content.indexOf('align="center"') !== -1) {
            cloneData[i].text.content = cloneData[i].text.content.replace(/align="center"/g, 'class="text-align-c"')
          }
          if (cloneData[i].text.content.indexOf('align="right"') !== -1) {
            cloneData[i].text.content = cloneData[i].text.content.replace(/align="right"/g, 'class="text-align-r"')
          }
          if (cloneData[i].text.content.indexOf('align="left"') !== -1) {
            cloneData[i].text.content = cloneData[i].text.content.replace(/align="left"/g, 'class="text-align-l"')
          }
          if (cloneData[i].text.content.indexOf('strike') !== -1) {
            cloneData[i].text.content = cloneData[i].text.content.replace(/strike/g, 'del')
          }
          if (cloneData[i].text.content.indexOf('color="') !== -1) {
            cloneData[i].text.content = cloneData[i].text.content.replace(/color="/g, 'style="color: ')
          }
          if (cloneData[i].text.content.indexOf('<table style="') !== -1) {
            cloneData[i].text.content = cloneData[i].text.content.replace(/<table style="/g, '<table style="border: 1px solid #ccc;')
          }
          if (cloneData[i].text.content.indexOf('<td style="') !== -1) {
            cloneData[i].text.content = cloneData[i].text.content.replace(/<td style="/g, '<td style="border: 1px solid #ccc;')
          }
        }
        if (cloneData[i].componentType === 20) {
          const list = []
          if (cloneData[i].propMap.selectType === '10') {
            if (cloneData[i].goodsList) {
              if (cloneData[i].goodsList.length) {
                let goodsList = cloneData[i].goodsList
                for (let a = 0; a < goodsList.length; a++) {
                  goodsList[a].selShow = false
                  this.showFastNum(goodsList[a])
                  list.push(goodsList[a])
                }
              }
            }
          } else {
            if (cloneData[i].goodsPage) {
              if (cloneData[i].goodsPage.records.length) {
                let records = cloneData[i].goodsPage.records
                for (let a = 0; a < records.length; a++) {
                  records[a].selShow = false
                  this.showFastNum(records[a])
                  list.push(records[a])
                }
              }
            }
          }
          cloneData[i] = Object.assign({ list: list }, cloneData[i])
        }
        if (cloneData[i].componentType === 31) {
          let goodsList = cloneData[i].goodsList
          for (let a = 0; a < goodsList.length; a++) {
            goodsList[a].selShow = false
            this.showFastNum(goodsList[a])
          }
          cloneData[i].timer = {}
          if (cloneData[i].propMap.startTime && cloneData[i].propMap.endTime) {
            let startTime = this.$utils.formatTimeStamp(cloneData[i].propMap.startTime)
            let endTime = this.$utils.formatTimeStamp(cloneData[i].propMap.endTime)
            if (endTime < new Date(this.serverDate).getTime()) {
              // 过滤掉活动时间结束的
              let deepList = this.$utils.deepClone(cloneData)
              deepList.splice(i, 1)
              cloneData = deepList
            } else {
              if (startTime > new Date(this.serverDate).getTime()) {
                // 活动开始时间大于当前时间 进入距离活动开始时间倒计时
                cloneData[i].propMap.countTime = startTime - new Date(this.serverDate).getTime()
                cloneData[i].propMap.isStart = false
              } else {
                // 活动时间小于等于当前时间 进入距离活动结束倒计时
                cloneData[i].propMap.countTime = endTime - new Date(this.serverDate).getTime()
                cloneData[i].propMap.isStart = true
              }
            }
          }
        }
        if (cloneData[i].componentType === 21) {
          this.floatList = cloneData[i].floatButtonList
        }
        // 小程序直播
        if (cloneData[i].componentType === 30) {
          let item = cloneData[i]
          if (item.liveList) {
            item.propMap.liveListLen = 0
            if (item.liveList.length) {
              item.propMap.liveListLen = item.liveList.length
              item.liveList.forEach(liveGoods => {
                let priceArr = []
                if (liveGoods.start_time) {
                  liveGoods.start_time = this.$utils.formatTimeToMD(liveGoods.start_time * 1000)
                }
                if (liveGoods.goods) {
                  liveGoods.goods.forEach(itemGoods => {
                    priceArr.push(Number(itemGoods.price))
                  })
                  liveGoods.minPrice = (Math.round(Math.min.apply(null, priceArr)) / 100).toFixed(2)
                  liveGoods.minPriceShort = String(Math.round(Math.min.apply(null, priceArr) * 100) / 100)
                  liveGoods.goods.forEach(itemLessGoods => {
                    if (itemLessGoods.price === liveGoods.minPriceShort) {
                      liveGoods.minCover_img = itemLessGoods.cover_img
                    }
                  })
                }
              })
            }
          }
        }
        // 内容组件
        if (cloneData[i].componentType === 40) {
          cloneData[i].contentList.forEach(item => {
            item.createTime = item.createTime.slice(0, item.createTime.length - 3)
            item.accessCount = this.accessCountTs(item.accessCount)
          })
        }
      }
      this.detailsList = cloneData
      clearTimeout(this.timer)
      this.timer = null
      this.timer = setTimeout(() => {
        if (cloneData.length === 0) {
          this.nodata = true
        } else {
          this.nodata = false
        }
      }, 1000)
      let that = this
      setTimeout(() => {
        for (var a = 0; a < that.audioCtx.length; a++) {
          let item = that.audioCtx[a]
          that.audioCtxObj[item] = that.$pt.createAudioContext('myAudio' + item)
          that.audioCtxObj[item].show = false
        }
        for (var b = 0; b < this.detailsList.length; b++) {
          if (this.detailsList[b].componentType === 17) {
            if (this.detailsList[b].audio.autoPlayback === 1) {
              let numOn = this.detailsList[b].sortNo
              this.audioCtxObj[numOn].play()
              this.detailsList[b].show = true
              const changeData = this.detailsList[b].show
              this.$delete(this.detailsList[b], 'show')
              this.$set(this.detailsList[b], 'show', changeData)
            }
          }
        }
      }, 200)
    },
    getMemberInfo() {
      getMemberInfo(this.getMemberId).then((response) => {
        if (response.isError) return
        this.memberInfo = response.data
      }).catch(() => {
      })
      getMemberInfo(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.customerInfo = response.data
      }).catch(() => {
      })
    },
    cartIndexEls() {
      let cartIndex = null
      this.navList = this.$pt.getStorageSync('navList')
      if (this.navList.length) {
        this.navList.forEach((item, index) => {
          if (item.linkType === 1007) {
            cartIndex = index
          }
        })
      } else {
        cartIndex = 2
      }
      return cartIndex
    },
    totalCartBadge(item) {
      let cartBadge = 0
      if (!this.fastGoods.length) {
        this.$pt.removeStorageSync('fastGoods')
        if (this.cartIndexEls()) {
          this.$pt.removeTabBarBadge({
            index: this.cartIndexEls()
          })
        }
        return
      }
      this.fastGoods.forEach(itemGoods => {
        cartBadge += itemGoods.goodsNum
      })
      if (this.cartIndexEls()) {
        this.$pt.setTabBarBadge({
          index: this.cartIndexEls(),
          text: String(cartBadge)
        })
      }
    },
    showFastNum(item) {
      let cartBadge = 0
      if (!this.fastGoods.length) return
      this.fastGoods.forEach(itemGoods => {
        if (itemGoods.goodsId === item.goodsId) {
          item.selShow = true
          if (itemGoods.skuFlag) {
            item.goodsNum = itemGoods.goodsNum
          } else {
            item.goodsNum = itemGoods.goodsNum
          }
        }
        cartBadge += itemGoods.goodsNum
      })
      if (this.cartIndexEls()) {
        this.$pt.setTabBarBadge({
          index: this.cartIndexEls(),
          text: String(cartBadge)
        })
      }
    },
    // 活动删除
    removeItem(item) {
      let statusTips = ''
      if (item.status) {
        statusTips = '移除后将对买家不显示该商品是否确认移除该商品？'
      } else {
        statusTips = '重新加入后将对买家显示该商品'
      }
      this.$pt.showModal({
        content: statusTips,
        success: res => {
          if (res.confirm) {
            let statusVal = null
            if (item.status) {
              statusVal = 0
            } else {
              statusVal = 1
            }
            saveByPromotionGoodsId({
              promotionGoodsId: item.promotionGoodsId,
              memberId: this.getCustomerId,
              status: statusVal
            }).then(response => {
              if (response.isError) return
              item.status = item.status === 1 ? 0 : 1
            })
          }
        }
      })
    },
    accessCountTs(count) {
      if (count >= 10000) {
        return (count / 10000) + '万'
      } else {
        return count
      }
    },
    loadMoreGoods(data) {
      // 加载更多点击
      if (data.list.length >= data.goodsPage.total) {
        return
      }
      if (!data.currentPage) {
        data.currentPage = 2
      }
      this.pageDetailGoods(data)
    },
    pageDetailGoods(data) {
      // 商品组 加载多页数据
      let params = {
        enterpriseId: this.getEnterpriseId,
        memberId: this.getMemberId,
        customerId: this.getCustomerId,
        detailsId: data.detailsId,
        currentPage: data.currentPage
      }
      pageDetailGoods(params).then(response => {
        if (response.isError) return
        response.data.records.forEach(item => {
          data.list.push(item)
        })
        const clonelist = this.$utils.deepClone(this.detailsList)
        this.detailsList = clonelist
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.user-bar{
  background: #fff;
  position: fixed;
  top: 64px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 10;
  .avatar{
    width: 27px;
    height: 27px;
    border-radius: 50px;
    margin-right: 8px;
  }
  .icon-v{
    position: absolute;
    right: 4px;
    bottom: 0;
    width: 13px;
    height: 13px;
  }
  .dark-gray{
    color: #595959;
  }
}
.search-ri{
  background: #f5f5f5;
  color: #999;
  border-radius: 50px;
}
.contactBtn {
  background-color: transparent !important;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  border-color: transparent !important;
  border: none !important;
}
.title-more{
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 5;
  margin: -9px 0 0 0;
}
.live-main {
  width: 100%;
  overflow: hidden;
}
.title-component {
  box-sizing: border-box;
}
/deep/ .goods-step {
  .van-stepper__minus,
  .van-stepper__plus {
    width: 36px;
    height: 36px;
  }
  .van-stepper__input-wrapper {
    width: 16px;
    height: 36px;
    border: transparent;
    font-size: 12px;
    color: #333;
    background: transparent;
    background-color: transparent;
  }
  .van-stepper__input {
    background-color: transparent;
    background: transparent;
    border: transparent;
  }
  .van-stepper__minus:after,
  .van-stepper__minus:before {
    // background-color: #fed806;
    background-color: unset;
  }
  .van-stepper__plus:after,
  .van-stepper__plus:before {
    background-color: #fff;
  }
  .van-stepper__minus {
    background-color: none;
    border-radius: 100px;
    border: none;
    background: url('https://veekrayimg.joinsun.vip/images/buy-sty-13.png')
      no-repeat center;
    background-size: 22px 23px;
  }
  .van-stepper__plus {
    background-color: none;
    border-radius: 100px;
    border: none;
    background: url('https://veekrayimg.joinsun.vip/images/buy-sty-10.png')
      no-repeat center;
    background-size: 22px 23px;
  }
  .van-stepper__minus--disabled,
  .van-stepper__plus--disabled {
    opacity: 0.3;
  }
  .van-stepper__minus--hover {
    opacity: 0.4;
  }
  .van-stepper__plus--hover {
    opacity: 0.5;
  }
}
.box-border {
  box-sizing: border-box;
}
// 直播多样式开始
.live-title {
  &.title-bar {
    h2 {
      margin: 0;
      padding: 0;
    }
  }
}
.live-style-10 {
  box-shadow: 0 0 19px rgba(172, 172, 172, 0.3);
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.live-style-11 {
  border: #eeeeee 1px solid;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.live-style-12 {
  margin-bottom: 10px;
}
.live-bar-3 {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  padding: 0 6px 6px 6px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-sizing: border-box;
  width: 168px;
  .names {
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
    text-shadow: 2x 2px 4px rgba(0, 0, 0, 0.5);
  }
  .infos {
    font-size: 12px;
    .name-line {
      i {
        display: block;
        height: 20px;
        line-height: 20px;
      }
      span {
        width: 65px;
        height: 20px;
        line-height: 20px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }
    }
    .share-btn {
      padding: 0 14px;
      font-size: 10px;
    }
  }
}
.share-btn {
  background-color: #ffe103;
  color: #333;
  padding: 0 19px;
  font-size: 12px;
}
.live-bar {
  position: relative;
  z-index: 2;
  &:before {
    content: '';
    display: block;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
    position: absolute;
    left: -6px;
    top: 30px;
    border-width: 3px 0 0 6px;
    z-index: 5;
  }
  .live-status {
    position: absolute;
    left: -6px;
    top: 10px;
    background: #222222;
    padding: 0 10px 0 8px;
    height: 20px;
    line-height: 20px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    z-index: 2;
  }
  .live-active {
    color: #e6cc00;
  }
  .cover-img {
    width: 100%;
    height: 185px;
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .live-name {
    position: absolute;
    left: 0;
    bottom: 0;
    color: #fff;
    padding: 0 12px;
    font-size: 15px;
    font-weight: bold;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.9)
    );
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  &.live-type-10 {
    .live-bar-r {
      display: none;
    }
  }
  &.live-type-11 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    .cover-img {
      width: 163px;
      height: 163px;
      border-top-left-radius: 4px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 0px;
    }
    .live-bar-l {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      .live-name {
        display: none;
      }
    }
    .live-bar-r {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      padding: 0 7px;
      .live-name {
        position: relative;
        left: 0;
        top: 0;
        color: #333;
        padding: 0;
        font-size: 15px;
        margin-top: 3px;
        font-weight: bold;
        background: none;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        box-sizing: border-box;
        width: 100%;
        height: 37px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }
      .goods-info {
        padding-top: 75px;
        span {
          position: relative;
          border-radius: 3px;
          display: inline-block;
          overflow: hidden;
          i {
            u {
              font-size: 9px;
              display: inline-block;
              position: absolute;
              left: 0;
              bottom: 0;
            }
            em {
              display: inline-block;
              width: 36px;
              margin-left: 7px;
              height: 16px;
              font-size: 11px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              word-break: break-word;
            }
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 20;
            width: 100%;
            height: 16px;
            font-size: 11px;
            padding-left: 2px;
            box-sizing: border-box;
            color: #fff;
            background: linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0),
              rgba(0, 0, 0, 0.9)
            );
          }
        }
        .goods-num {
          margin-left: 8px;
          border-radius: 3px;
          background: #edeaeb;
          color: #999;
          text-align: center;
          overflow: hidden;
        }
      }
    }
  }
  &.live-type-12 {
    .live-bar-r {
      display: none;
    }
  }
}
.flex-live {
  position: relative;
  .live-left-space {
    display: block;
    position: absolute;
    left: -15px;
    top: -10px;
    width: 13px;
    height: 320px;
    background: #fff;
    z-index: 20;
  }
  .live-right-space {
    display: block;
    position: absolute;
    right: -15px;
    top: -10px;
    width: 13px;
    height: 320px;
    background: #fff;
    z-index: 20;
    &.live-style-s-10 {
      width: 14px;
      right: -15px;
    }
    &.live-style-s-11 {
      right: -17px;
    }
  }
  &.live-type-10 {
    .live-style-10 {
      /deep/ .swiper-item {
        width: 325px !important;
        height: 222px !important;
        overflow: visible;
        box-shadow: 0 0 19px rgba(172, 172, 172, 0.3);
        padding: 10px;
        border-radius: 8px;
        margin: 15px 10px 10px 10px;
      }
    }
    .live-style-11 {
      /deep/ .swiper-item {
        width: 325px !important;
        height: 222px !important;
        overflow: visible;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
        padding: 10px;
        border-radius: 8px;
        margin: 0px 10px 10px 10px;
      }
    }
    .live-style-12 {
      /deep/ .swiper-item {
        width: 325px !important;
        height: 222px !important;
        overflow: visible;
        box-shadow: 0px 0px 0;
        padding: 10px;
        border-radius: 8px;
        margin: 0px 10px 10px 10px;
      }
    }
    .live-swiper {
      margin-left: -12px;
      width: 375px;
      height: 272px;
      .flex-live-item {
        padding: 0px !important;
        margin-bottom: 0px !important;
        border: none !important;
      }
      .swiper-bar {
        width: 325px;
        height: 222px;
      }
    }
    .show-style-3 {
      display: none;
    }
  }
  &.live-type-11 {
    .live-style-10 {
      /deep/ .swiper-item {
        width: 325px !important;
        height: 222px !important;
        overflow: visible;
        box-shadow: 0 0 19px rgba(172, 172, 172, 0.3);
        padding: 10px;
        border-radius: 8px;
        margin: 15px 10px 10px 10px;
      }
    }
    .live-style-11 {
      /deep/ .swiper-item {
        width: 325px !important;
        height: 222px !important;
        overflow: visible;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
        padding: 10px;
        border-radius: 8px;
        margin: 0px 10px 10px 10px;
      }
    }
    .live-style-12 {
      /deep/ .swiper-item {
        width: 325px !important;
        height: 222px !important;
        overflow: visible;
        box-shadow: 0px 0px 0;
        padding: 10px;
        border-radius: 8px;
        margin: 0px 10px 10px 10px;
      }
    }
    .live-swiper {
      margin-left: -12px;
      width: 375px;
      height: 272px;
      .flex-live-item {
        padding: 0px !important;
        margin-bottom: 0px !important;
        border: none !important;
      }
      .swiper-bar {
        width: 325px;
        height: 222px;
      }
    }
    .show-style-3 {
      display: none;
    }
  }
  &.live-type-12 {
    /deep/ .swiper-item {
      overflow: visible;
    }
    .flex-live-item.vertically {
      width: 168px;
      height: 284px;
      float: left;
      &:nth-child(even) {
        float: right;
      }
      .show-style-3 {
        display: block;
      }
      .hide-style-3 {
        display: none;
      }
      .cover-img {
        width: 168px;
        height: 284px;
        border-radius: 5px;
      }
      &.live-style-10 {
        border-radius: 5px;
        padding: 0px;
        .cover-img {
          box-shadow: 0px 1px 8px rgba(156, 156, 156, 0.35);
        }
      }
      &.live-style-11 {
        border: 1px solid #fff;
        padding: 0px;
        border-radius: 5px;
        .cover-img {
          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
        }
      }
      &.live-style-12 {
        border-radius: 5px;
        padding: 0px;
        .cover-img {
          box-shadow: 0px 0 0;
        }
      }
    }
    .live-swiper {
      width: 354px;
      height: 304px;
      .flex-live-item {
        margin-bottom: 0px !important;
        .hide-style-3 {
          display: none;
        }
        .cover-img {
          width: 168px;
          height: 284px;
          border-radius: 5px;
        }
        &.live-style-10 {
          border-radius: 5px;
          padding: 0px;
          .cover-img {
            box-shadow: 0px 1px 8px rgba(156, 156, 156, 0.35);
          }
        }
        &.live-style-11 {
          border: none;
          padding: 0px;
          border-radius: 5px;
          .cover-img {
            box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
          }
        }
        &.live-style-12 {
          border-radius: 5px;
          padding: 0px;
          .cover-img {
            box-shadow: 0px 0 0;
          }
        }
      }
      .swiper-bar {
        width: 354px;
        height: 304px;
      }
    }
    &:after {
      content: '';
      display: block;
      clear: both;
      font-size: 0;
    }
  }
}
.live-avatar {
  border-radius: 100px;
}
// 直播多样式结束
// 搜索栏样式
.search-bar {
  padding: 5px 15px;
  background: white;
  .search {
    display: flex;
    align-items: center;
    height: 30px;
    color: #aeaeae;
    background-color: #f8f8f8;
    &-align-10 {
      justify-content: left;
    }
    &-align-11 {
      justify-content: center;
    }
    &-shape-12 {
      border-radius: unset;
    }
    &-shape-11 {
      border-radius: 25px;
    }
    &-shape-10 {
      border-radius: 4px;
    }
  }
}
// 按钮组样式
.button-bar {
  font-size: 24rpx;
  .btns-radius-10 {
    border-radius: 50%;
  }
  .btns-radius-11 {
    border-radius: 10px;
  }
  .button-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    .shape-type-10 {
      border-radius: 50%;
    }
    .shape-type-11 {
      border-radius: 10px;
    }
  }
  .button-type-3 {
    justify-content: space-around;
  }
  .button-swiper {
    .double-page {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }    
  }
  .button-ul{
    .single-page{
      &:nth-child(2){
        margin-top: 10px;
      }
    }
    .single-txt.single-page-11{
      &:nth-child(2){
        margin-top: 0px;
      }
    }
  }
  .single-page {
    display: flex;
    width: 100%;
    & > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  ul:nth-child(2) {
    margin-top: 20rpx;
  }
}
.button-bar-1{
  display: flex;
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  .button-text{
    flex-shrink: 0;
    text-align: center;
  }
}
// 图片组样式
.img-bar {
  font-size: 0;
  .image {
    display: inline-block;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
// 标题栏样式
.title-align-10 {
  text-align: left;
}
.title-align-11 {
  text-align: center;
}
.title-align-12 {
  text-align: right;
}
// 商品栏样式
.goods-bar {
  line-height: 1;  
  .color-price {
    color: #eb4e4e;
  }
  .img-box {
    position: relative;
    overflow: hidden;
  }
  .sell-out {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: rgba(254, 254, 254, 0.7);
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    .del-layer {
      border-radius: 50%;
      border: 1px solid white;
      justify-content: center;
      width: 100px;
      height: 100px;
    }
    .delete-css {
      position: absolute;
      transform: rotate(-45deg);
      background: rgba(255, 255, 255, 0.58);
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      width: 100%;
      text-align: center;
      color: #000;
    }
  }
  .font-over {
    max-width: 63px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  .nameplate {
    font-size: 0;
    .left {
      background: #fed807;
      color: #272727;
      font-size: 12px;
      display: inline-block;
    }
    .right {
      background: #272727;
      color: white;
      font-size: 12px;
      display: inline-block;
      border-radius: 0 4px 4px 0;
    }
  }
  .price-short {
    max-width: 63px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  .load-more{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 17px;
    width: 100%;
  }
  .goods-type-11 {
    border: 1px solid #eeeeee;
  }
  .goods-type-10 {
    box-shadow: 0 0 8px rgba(156, 156, 156, 0.22);
  }
  .detail {
    overflow: hidden;
    box-sizing: border-box;
  }
  .show-type-10 {
    .detail {
      border-radius: 8px;
      box-shadow: 0 1px 6px rgba(93, 93, 93, 0.2);
      .img-box {
        width: 100%;
        height: 187px;
        image {
          width: 100%;
          height: 187px;
        }
        .sell-out {
          font-size: 18px;
          .del-layer {
            width: 100px;
            height: 100px;
          }
          .delete-css {
            left: -153px;
            top: 10px;
          }
        }
      }
      .content {
        padding: 0 10px 12px 10px;
        box-sizing: border-box;
        // background: white;
        .title-share {
          padding-top: 10px;
          // margin: 0 -10px;
          .plate-h {
            padding-bottom: 2px;
          }
        }
        .line-1 {
          font-size: 14px;
          height: 14px;
          line-height: 1;
          margin-bottom: 15px;
        }
        .nameplate {
          font-size: 0;
          display: flex;
          align-items: center;
          height: 18px;
          line-height: 18px;
          .left {
            padding: 0 5px 0 6px;
            border-radius: 9px 0 0 0;
          }
          .right {
            padding: 0 8px 0 5px;
            border-radius: 0 9px 9px 0;
            font-size: 14px;
          }
        }
        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: -3px;
          .row-left {
            display: flex;
            flex-flow: row;
            align-items: flex-end;
            flex: 1;
            margin-top: 2px;
            .color-price {
              padding-top: 4px;
            }
            .dollar-sign {
              font-size: 13px;
              padding-top: 7px;
            }
            .price {
              font-size: 22px;
              max-width: 115px;
            }
            .font-over {
              margin-left: 11px;
              margin-bottom: 1px;
            }
          }
          .row-right {
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-right: -5px;
            margin-bottom: -5px;
            img {
              margin-bottom: -2px;
            }
          }
          .btn-add {
            margin-left: 11px;
          }
          .btn-sellout {
            transform: rotate(45deg);
          }
        }
      }
    }
  }
  .show-type-11 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .detail {
      flex: 0 0 calc((100% - 15px) / 2);
      vertical-align: top;
      width: 100%;
      box-sizing: border-box;
      &:nth-child(even) {
        margin-left: 15px;
      }
      .img-box {
        width: 100%;
        height: 165px;
        image {
          width: 100%;
          height: 165px !important;
        }
        .sell-out {
          .del-layer {
            width: 85px;
            height: 85px;
          }
          .delete-css {
            left: -63px;
            top: 10px;
          }
        }
      }
      .content {
        // background: #fafafa;
        position: relative;
        box-sizing: border-box;
        padding: 0 5px 15px 5px;
        .title-share {
          padding: 5px 5px 0;
          margin: 0 -5px;
        }
        .line-2 {
          height: 35px;
          font-size: 13px;
          margin-bottom: 23px;
        }
        .plate-h {
          height: 26px;
        }
        .nameplate {
          height: 16px;
          line-height: 16px;
          margin-bottom: 9px;
          .left {
            padding: 0 5px;
          }
          .right {
            padding: 0 5px;
            border-radius: 0 2px 2px 0;
          }
        }
        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-top: -9px;
          .row-left {
            flex: 1;
            .dollar-sign {
              font-size: 12px;
              padding-top: 5px;
            }
            .price {
              font-size: 18px;
            }
            .color-price {
              margin-bottom: -3px;
            }
          }
          .row-right {
            margin-right: -6px;
            margin-bottom: -12px;
            img {
              margin-bottom: -2px;
            }
          }
          .btn-sellout {
            transform: rotate(45deg);
          }
        }
      }
    }
  }
  .show-type-12 {
    .detail {
      display: flex;
      .img-box {
        width: 112px;
        height: 112px;
        image {
          width: 112px;
          height: 112px;
        }
        .sell-out {
          .del-layer {
            width: 75px;
            height: 75px;
          }
          .delete-css {
            left: -42px;
            top: 10px;
          }
        }
      }
      .content {
        // background: #fafafa;
        position: relative;
        box-sizing: border-box;
        padding: 0 5px;
        flex: 1;
        .title-share {
          padding: 8px 5px 0;
          margin: 0 -5px;
        }
        .line-2 {
          height: 35px;
          font-size: 13px;
          margin-top: -4px;
          margin-bottom: 23px;
        }
        .plate-h {
          height: 16px;
          padding-bottom: 5px;
        }
        .plate-other-h {
          height: 16px;
        }
        .nameplate {
          font-size: 0;
          height: 16px;
          line-height: 16px;
          .left {
            padding: 0 5px;
          }
          .right {
            padding: 0 5px;
            border-radius: 0 2px 2px 0;
          }
        }
        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: -7px;
          .row-left {
            display: flex;
            align-items: flex-end;
            flex: 1;
            .dollar-sign {
              font-size: 12px;
              padding-top: 5px;
            }
            .price {
              font-size: 18px;
            }
            .font-over {
              margin-left: 3px;
              // margin-bottom: -1px;
            }
          }
          .row-right {
            margin-right: -2px;
            // margin-bottom: -7px;
            img {
              margin-bottom: -2px;
            }
          }
          .btn-sellout {
            margin-right: 5px;
            transform: rotate(45deg);
          }
        }
      }
    }
  }
  .show-type-13 {
    .detail {
      display: flex;
      padding: 10px;
      // background: #fafafa;
      .img-box {
        width: 134px;
        height: 134px;
        image {
          width: 134px;
          height: 134px;
        }
        .sell-out {
          .del-layer {
            width: 85px;
            height: 85px;
          }
          .delete-css {
            left: -42px;
            top: 10px;
          }
        }
      }
      .content {
        position: relative;
        height: 134px;
        box-sizing: border-box;
        padding: 0 0 0 10px;
        flex: 1;
        // background: #fafafa;
        &:nth-child(odd) {
          padding: 0 10px 0 0;
        }
        .line-2 {
          font-size: 15px;
          margin-bottom: 9px;
          height: 39px;
        }
        .plate-h {
          height: 18px;
        }
        .plate-other-h {
          height: 18px;
        }
        .nameplate {
          font-size: 0;
          height: 16px;
          line-height: 16px;
          margin-bottom: 2px;
          .left {
            padding: 0 5px;
          }
          .right {
            padding: 0 5px;
          }
        }
        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .row-left {
            flex: 1;
            .timelimit {
              font-size: 12px;
              color: #999999;
              padding-top: 4px;
            }
            .dollar-sign {
              font-size: 12px;
              padding-top: 5px;
            }
            .price {
              font-size: 18px;
            }
            .font-over {
              margin-top: 4px;
            }
          }
          .btn-sellout {
            margin-right: 5px;
            transform: rotate(45deg);
          }
        }
        .rushtobuy-btn {
          margin-top: 4px;
          width: 74px;
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #333333;
          background: #fed806;
          text-align: center;
          border-radius: 2px;
          position: absolute;
          bottom: 0;
        }
      }
    }
  }
  .show-type-14 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    .load-more{
      flex-direction: column;
      margin-top: unset;
      margin-left: 13.5px;
    }
    .detail {
      flex-shrink: 0;
      vertical-align: top;
      width: 42%;
      margin-left: 4.5%;
      &:first-child {
        margin-left: 0;
      }
      .img-box {
        width: 100%;
        height: 145px;
        image {
          width: 100%;
          height: 145px !important;
        }
        .sell-out {
          .del-layer {
            width: 85px;
            height: 85px;
          }
          .delete-css {
            left: -63px;
            top: 10px;
          }
        }
      }
      .content {
        // background: #fafafa;
        position: relative;
        box-sizing: border-box;
        padding: 0 5px 15px 5px;
        .title-share {
          padding: 5px 5px 0;
          margin: 0 -5px;
        }
        .line-2 {
          height: 35px;
          font-size: 13px;
          margin-bottom: 23px;
        }
        .plate-h {
          height: 26px;
        }
        .nameplate {
          height: 16px;
          line-height: 16px;
          margin-bottom: 9px;
          .left {
            padding: 0 5px;
          }
          .right {
            padding: 0 5px;
            border-radius: 0 2px 2px 0;
          }
        }
        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-top: -9px;
          .row-left {
            flex: 1;
            .dollar-sign {
              font-size: 12px;
              padding-top: 5px;
            }
            .price {
              font-size: 18px;
            }
            .color-price {
              margin-bottom: -3px;
            }
          }
          .row-right {
            margin-right: -6px;
            margin-bottom: -12px;
            img {
              margin-bottom: -2px;
            }
          }
          .btn-sellout {
            transform: rotate(45deg);
          }
        }
      }
    }
  }
}
// 秒杀组样式
.seckill-bar {
  .title-bar {
    .left-title {
      height: 7px;
      background: #fed806;
      padding: 0 3px;
      .small-title {
        max-width: 76px;
        font-size: 18px;
        height: 18px;
        overflow: hidden;
        margin-top: -14px;
      }
    }
    .count-down {
      .square-block {
        background: #fed806;
        font-size: 12px;
        // color: #333;
        // width: 15px;
        padding: 0 2px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        display: inline-block;
      }
      .square-t {
        color: #fee038;
      }
    }
  }
}
// 视频
.video {
  width: 100%;
  height: 191px;
  display: block;
  &.video-w-1 {
    width: 100%;
    height: 191px;
  }
  &.video-w-2 {
    width: 100%;
    height: 255px;
  }
  &.video-w-3 {
    width: 100%;
    height: 340px;
  }
}
// 音频
.audio-box {
  margin: 6px 0px;
  width: 340px;
  height: 70px;
  overflow: hidden;
  text-align: center;
  .audio-con {
    display: inline-block;
    text-align: left;
  }
  .default-bar {
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 1;
  }
  .audio-bar {
    // background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    z-index: 2;
    .audio-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      margin-top: -21px;
    }
    .audio-title {
      position: absolute;
      left: 70px;
      top: 0;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
// 内容组件
.content-center{
  min-height: 30px;
  .content-title{
    padding: 12px 15px 0;
  }
  .content-item{
    border-bottom: 1px solid #EEEEEE;
    .flex-between-t{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .flex-between-col{
      height: 70px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      flex: 1;
    }
    .play-layer{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  // 2行文字展示
  .line-2{
    height: unset;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
}
</style>
